<script setup>
	import { ref, nextTick } from 'vue'

	const props = defineProps({
		img: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: '-'
		},
		des: {
			type: String,
			default: ''
		},
		price: {
			type: Number,
			default: 0
		},
		linePrice: {
			type: Number,
			default: 0
		},
		total: {
			type: Number,
			default: 0
		},
		specs: {
			type: String,
			default: ''
		},
		min: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 999
		},
		showAdd: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		imgView: {
			type: Boolean,
			default: false
		},
		mode: {
			type: String,
			default: 'add' // add添加模式 view大图 viewM小图 viewP积分小图  viewPL积分大图  viewD 套餐小图
		}
	})
	const num = defineModel()
	const emit = defineEmits(['change'])
	const sType = ['viewM', 'viewP', 'viewD', 'invalidD']
	const shadowStyle = {
		position: 'absolute',
		bottom: 0,
		right: 0,
		width: '84rpx',
		backgroundImage: "linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 30%)"
	}
	
	function numChange(e) {
		let preNum = num.value
		num.value = e.value
		nextTick(() => {
			emit('change', {
				num: e.value,
				preNum
			})
		})
	}
	function addCar() {
		num.value = 1
		emit('change',  {
			num: 1,
			preNum: 0
		})
	}
	function viewImg(e) {
		if(!props.imgView) return
		e.stopPropagation()
		let urls = [props.img]
		uni.previewImage({
			urls: urls
		})
	}
</script>

<template>
	<view class="goods-content">
		<view class="goods-image" @click="viewImg">
			<uv-image :src="props.img" :width="sType.includes(props.mode) ? 128 : 144" :height="sType.includes(props.mode)? 128 : 144" radius="8"></uv-image>
			<view class="image-invalid" v-if="props.mode == 'invalid' || props.mode === 'invalidD' || props.disabled">
				<view class="image-invalid-box">已失效</view>
			</view>
		</view>
		<view class="goods-info">
			<template v-if="props.mode == 'add'">
				<view class="app-head">
					<view class="goods-name uv-line-1">{{props.name}}</view>
					<view class="goods-center">
						<uv-tags :text="'限购' + props.max + '份'" borderColor="rgba(250,63,0,0.1)" bgColor="rgba(250,63,0,0.1)" color="#FA3F00" shape="circle" 
							size="mini" v-if="props.max < 999"></uv-tags>
						<slot></slot>
					</view>
				</view>
				<view class="goods-bottom" @click.stop>
					<view class="box-price" v-if="!props.disabled">
						<view class="goods-price" >
							<text class="text-price">
								<text>{{props.price? props.price.toFixed(2).split(".")[0] : '0'}}</text>
								<text>.</text>
								<text style="font-size: 60%;">{{props.price? props.price.toFixed(2).split(".")[1] : '00'}}</text>
							</text>
							<text class="text-unit" v-if="props.specs">/{{props.specs}}</text>
						</view>
						<view class="goods-original" v-if="props.linePrice">¥{{props.linePrice.toFixed(2)}}</view>
					</view>
					<view class="text-invalid" v-else>该地区下不存在该商品</view>
					<view class="goods-add" v-if="props.showAdd">
						<view class="add-car" v-if="!num" @click="addCar">
							<uv-icon name="plus" color="#ffffff" size="24" bold></uv-icon>
						</view>
						<view class="number-box" v-else>
							<uv-number-box v-model="num" inputWidth="58rpx" integer :disabled="props.disabled" :min="props.min > props.max? 0 : props.min"
								:max="props.min > props.max? 1 : props.max" @change="numChange">
								<template v-slot:minus="{disabled}" v-if="!props.disabled">
									<view :class="['operate-box', disabled? 'disabled' : '']">
										<uv-icon name="minus" :color="disabled? '#c8c9cc' : '#FF3E49'" size="24" bold></uv-icon>
									</view>
								</template>
								<template v-slot:plus="{disabled}" v-if="!props.disabled">
									<view :class="['operate-box', disabled? 'disabled' : '']">
										<uv-icon name="plus" :color="disabled? '#c8c9cc' : '#FF3E49'" size="24" bold></uv-icon>
									</view>
								</template>
							</uv-number-box>
						</view>
					</view>
				</view>
			</template>
			<template v-else-if="props.mode == 'invalid' || props.mode === 'invalidD'">
				<view class="goods-name uv-line-1 text-invalid">{{props.name}}</view>
				<view class="tip-invalid">抱歉，商品已售馨</view>
			</template>
			<template v-else-if="props.mode == 'view'">
				<view class="goods-view-top">
					<view class="view-top-name uv-line-1">{{props.name}}</view>
					<view class="view-top-price">{{props.total? props.total.toFixed(2) : 0.00}}</view>
				</view>
				<view class="goods-view-info">
					<text>单价：</text>
					<text>¥{{props.price? props.price.toFixed(2) : 0.00}}</text>
					<text v-if="props.specs">/{{props.specs}}</text>
				</view>
				<view class="goods-view-info"><text>数量：</text><text>{{num}}</text></view>
			</template>
			<template v-else-if="props.mode == 'viewM'">
				<view class="view-m-name uv-line-1">{{props.name}}</view>
				<view class="view-m-goods">
					<view class="goods-price" v-if="props.price">
						<text class="text-price">{{props.price.toFixed(2)}}</text>
						<text class="text-unit" v-if="props.specs">/{{props.specs}}</text>
					</view>
					<view class="flex-1" v-else>
						<uv-read-more show-height="72rpx" :toggle="true" closeText="" textIndent="0" fontSize="24rpx" color="#999999" :shadowStyle="shadowStyle">
							<view class="goods-des">{{props.des}}</view>
						</uv-read-more>
					</view>
					<view class="goods-num">{{num}}</view>
				</view>
			</template>
			<template v-else-if="props.mode == 'viewP'">
				<view class="view-m-name uv-line-1">{{props.name}}</view>
				<view class="view-m-goods">
					<view class="points">
						<text class="text-points">{{props.price || 0}}</text>
						<text class="text-tip">积分</text>
					</view>
					<view class="goods-num">{{num}}</view>
				</view>
			</template>
			<template v-else-if="props.mode == 'viewPL' ">
				<view class="goods-view-top">
					<view class="view-top-name uv-line-1">{{props.name}}</view>
					<view class="view-top-points">{{props.total || 0}}</view>
				</view>
				<view class="goods-view-info">
					<text>单价：</text>
					<text>{{props.price || 0}}积分</text>
					<text v-if="props.specs">/{{props.specs}}</text>
				</view>
				<view class="goods-view-info"><text>数量：</text><text>{{num}}</text></view>
			</template>
			<template v-else-if="props.mode == 'viewD'">
				<view class="view-d">
					<view class="view-d-name uv-line-1">{{props.name}}</view>
					<view class="view-d-num">{{num}}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.goods-content {
		width: 100%;
		display: flex;
		gap: 8rpx;
		.goods-image{
			flex-shrink: 0;
			position: relative;
			padding: 8rpx 8rpx 8rpx 0;
		}
		.goods-info{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.app-head{
				.goods-name{
					font-weight: 600;
				}
				.goods-center{
					margin-top: 4rpx;
					display: flex;
					gap: 12rpx;
				}
			}
			.goods-bottom{
				margin-top: 8rpx;
				min-height: 62rpx;
				display: flex;
				align-items: center;
				gap: 16rpx;
				.box-price{
					width: calc(100% - 182rpx);
					line-height: var(--theme-xs-line);
				}
				.goods-price{
					font-size: var(--theme-lg);
				}
				.goods-original{
					font-size: var(--theme-sm);
					color: #999999;
					text-decoration-line: line-through;
				}
				.goods-add{
					width: 166rpx;
					display: flex;
					justify-content: flex-end;
					.add-car{
						margin: 8rpx;
						width: 44rpx;
						height: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FA3F00;
						border-radius: 50%;
					}
					.operate-box{
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						&.disabled{
							background-color: #f7f8fa;
						}
					}
					.number-box{
						background-color: #EEEEEE;
						padding: 8rpx;
						border-radius: 60rpx;
					}
				}
			}
			.text-price{
				color: #FF0D0D;
				font-weight: 600;
				&::before{
					content: "¥";
					font-size: 60%;
				}
			}
			.text-unit{
				color: #999999;
				font-size: var(--theme-xs);
			}
			.view-m-name{
				font-weight: 600;
			}
			.goods-view-top{
				margin-bottom: 22rpx;
				display: flex;
				align-items: center;
				gap: 6rpx;
				font-weight: 600;
				.view-top-name{
					flex: 1;
				}
				.view-top-price{
					flex-shrink: 0;
					color: #FF0D0D;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
					&::before{
						content: "¥";
						font-size: 60%;
					}
				}
				.view-top-points{
					flex-shrink: 0;
					color: #FF0D0D;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
					&::after{
						content: "积分";
					}
				}
			}
			.goods-view-info{
				margin-bottom: 8rpx;
				color: #767473;
			}
			.view-m-goods{
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 16rpx;
				.goods-des{
					color: rgba(26,24,22,0.6);
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
				}
				.text-points{
					color: #FF0D0D;
					font-weight: 600;
				}
				.text-tip{
					margin-left: 10rpx;
					font-size: var(--theme-sm);
					color: #999999;
				}
				.goods-num{
					flex-shrink: 0;
					&::before{
						content: "x";
						font-size: 60%;
					}
				}
			}
			.view-d{
				display: flex;
				align-items: center;
				gap: 6rpx;
				.view-d-name{
					flex: 1;
					font-weight: 600;
				}
				.view-d-num{
					flex-shrink: 0;
					color: #877272;
					&::before{
						content: "x";
						font-size: 60%;
					}
				}
			}
		}
		.image-invalid{
			position: absolute;
			top: 8rpx;
			left: 0;
			right: 8rpx;
			bottom: 8rpx;
			z-index: 10;
			background-color: rgba(0,0,0,0.5);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.image-invalid-box{
				background-color: rgba(0,0,0,0.8);
				padding: 4rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
		}
		.text-invalid{
			color: rgba(26,24,22,0.6);
		}
		.tip-invalid{
			margin-top: 16rpx;
			color: rgba(26,24,22,0.6);
		}
		.flex-1{
			flex: 1;
		}
	}
</style>